<template>
  <view class="content">
    <u-navbar :placeholder='true' title="公司資料修改" leftIcon="arrow-leftward"
              @leftClick="leftClick('/pages/mine/setting/index')">
    </u-navbar>
    <view class="main">
      <view>
        <view class="form">
          <view class="form-l">
            用戶ID
          </view>
          <view class="form-r">
            <input disabled v-model="company.user_id" class="input-item" type="text" placeholder="">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            公司名稱（中文）
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="company.companyname" class="input-item" type="text" placeholder="">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            公司名稱（英文）
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="company.en_companyname" class="input-item" type="text" placeholder="">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            電子郵箱
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="company.email" class="input-item" type="text" placeholder="">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            聯繫電話
          </view>
          <view class="form-r">
            <input v-model="company.tel" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            手機號碼
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="company.phone" class="input-item" type="text">
          </view>
        </view>
        <view class="form" style="border-bottom: none;">
          <view class="form-l">
            傳真號碼
          </view>
          <view class="form-r">
            <input v-model="company.fax" class="input-item" type="text">
          </view>
        </view>
      </view>
    </view>
    <view class="main" style="margin-top: 16rpx;">
      <view>
        <view class="form">
          <view class="form-l">
            負責人姓名
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="company.principal" class="input-item" type="text" placeholder="">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            公司類別
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <picker @change="typeChange" :value="typeindex" :range="options.cn_type">
              <view class="picker">
                <view class="uni-input">{{ company.industry }}</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            所屬市場
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <picker @change="regionsChange" :value="regionsindex" :range="options.cn_regions">
              <view class="picker">
                <!-- <view class="uni-input">{{array[index]}}</view> -->
                <view class="uni-input">{{ company.market }}</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            營業執照
          </view>
          <view class="form-r">
            <image v-if="!img " @click="getImg" style="width: 178rpx; height: 178rpx;"
                   src="@/static/images/login_add.png" mode=""></image>
            <image v-if="img" @click="getImg" style="width: 178rpx; height: 178rpx;" :src="img"></image>
          </view>
        </view>
        <view class="form" style="border-bottom: none;">
          <view class="form-l">
            金額分配送額度
          </view>
          <view class="form-r">
            <input v-model="company.amount" class="input-item" type="text" placeholder="">
          </view>
        </view>
      </view>
    </view>
    <view class="btn" @click="submit">
      提交
    </view>
  </view>
</template>

<script>
import {
  getmycompany,
  submycompany
} from '@/network/api/setting.js'
import {
  pathToBase64
} from '@/js_sdk/mmmm-image-tools/index.js'

export default {
  data() {
    return {
      img: '',
      company: {},
      array: ['請選擇', '中国', '美国', '巴西', '日本'],
      typeindex: 0,
      regionsindex: 0,
      value: false,
      options: {
        cn_regions: [
          "香港",
          "澳門"
        ],
        cn_type: [
          "博彩業",
          "工業",
          "服務業",
          "郵電",
          "通信",
          "社區服務",
          "批發",
          "零售業",
          "慈善機構"
        ],
      },
    }
  },
  onShow() {
    this.getMycompany()
  },
  methods: {
    getImg() {
      uni.chooseImage({
        count: 1,
        // sizeType压缩图片
        sizeType: "compressed",
        success: (res) => {
          this.img = res.tempFilePaths[0]
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: (path) => {
              pathToBase64(path.path).then(base64 => {
                this.company.license = base64.split(",")[1]
              })
                  .catch(error => {
                    console.error(error)
                  })
            }
          })
        }
      })
    },
    async submit() {
      if (!this.company.companyname) {
        uni.showToast({
          title: '公司名稱（中文）不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.company.en_companyname) {
        uni.showToast({
          title: '公司名稱（英文）不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.company.email) {
        uni.showToast({
          title: '電子郵箱不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.company.phone) {
        uni.showToast({
          title: '手機號碼不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.company.principal) {
        uni.showToast({
          title: '負責人姓名不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.company.industry) {
        uni.showToast({
          title: '公司類別不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.company.market) {
        uni.showToast({
          title: '所屬市場不能为空',
          icon: 'none'
        })
        return
      }
      let data = {
        company_id: this.company.company_id,
        companyname: this.company.companyname,
        en_companyname: this.company.en_companyname,
        email: this.company.email,
        tel: this.company.tel,
        phone: this.company.phone,
        principal: this.company.principal,
        address: this.company.address,
        fax: this.company.fax,
        area: this.company.area,
        industry: this.company.industry,
        market: this.company.market,
        license: this.company.license,
        amount: this.company.amount
      }
      const res = await submycompany(data)
      if (res.data.code == 1) {
        uni.showToast({
          title: '提交成功',
        })
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        })
      }
    },
    async getMycompany() {
      const res = await getmycompany()
      this.company = res.data.company
      this.img = res.data.company.license
    },
    change(e) {
      console.log('change', e);
    },
    //市场
    regionsChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.regionsindex = e.detail.value
      this.company.market = this.options.cn_regions[this.regionsindex]
    },
    //类别
    typeChange(e) {
      this.typeindex = e.detail.value
      this.company.industry = this.options.cn_type[this.typeindex]
    },
    leftClick(url) {
      console.log('rightClick');
      uni.navigateBack()
    },
  }
}
</script>

<style lang="scss">
.content {
  position: relative;
  background-color: #F5F6F9;
  width: 100%;
  height: 1775rpx;

  .main {
    background-color: #fff;

    .form {
      margin: 0 32rpx;
      padding: 32rpx 0;
      display: flex;
      border-bottom: 1rpx solid #DEDEDE;;

      .form-l {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }

      .form-r {
        margin-left: 48rpx;
        flex: 1;

        .picker {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .uni-input {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }
      }
    }

  }

  .open {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-top: 22rpx;
    background-color: #fff;
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn {
    position: fixed;
    bottom: 15rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 80rpx;
    color: #FFFFFF;
    width: 686rpx;
    height: 80rpx;
    text-align: center;
    background: #645AED;
    opacity: 1;
    border-radius: 30rpx;
  }
}
</style>
